import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useRef, useState } from 'react';
import Switch from 'components/Switch'
import RadioButton from 'components/RadioButton'
import classNames from 'classnames';


export default function Index() {
  const [active, setActive] = useState(false)
  const [current, setCurrent] = useState('start')
  const select = useRef(false)
  const area = ['start', 'center', 'end']


  function disableBtn(state: boolean) {
    select.current = state
  }

  const _target = classNames(s.target, {
    [s.active]: active
  })
  
  return (
    <View className={s.wrapper}>
      <View className={s.container}>
        <View id={s.controllerTitle}>place-content</View>
        <View id={s.controller}>
          {area.map((item) => (
            <View
              key={item}
              id={s.btn}
              className={item === current ? s.active : ''}
              onClick={() =>setCurrent(item)}
              >{item}</View>
          ))}
        </View>
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>
          {/* 上层 */}
          <View 
            id={s.over}
            className={_target}
            style={{placeContent: `${current}`}}
          >
            <View className={s.box_out}>
              <View className={s.box_inner}>{'<content>'}</View>
            </View>
          </View>
          {/* 下层 */}
          <View
            id={s.under}
            className={_target}
          >
            <View
              className={s.column_box}
              style={{justifyContent: `${current}`}}
              >
              <View className={s.column_line}></View>
            </View>
            <View
              className={s.row_box}
              style={{alignContent: `${current}`}}
              >
              <View className={s.row_line}></View>
            </View>

            <View
              className={s.column_box}
              style={{ justifyContent: `${current}` }}
            >
              <View id={s.bg} className={s.column_line}></View>
            </View>
            <View
              className={s.row_box}
              style={{ alignContent: `${current}` }}
            >
              <View id={s.bg} className={s.row_line}></View>
            </View>
          </View>
        </View>
        <Switch text='展示' state={active} onClick={() => select.current ? undefined : setActive(!active)} />
      </View>
      <RadioButton text='禁用按钮' onChange={disableBtn}/>
    </View> 
  )
}
